////
/// Dialog
/// A modal that appears above all other content
/// @group dialog
////

// Dialog background color
$am-dialog-background: #fff !default;
// Dialog container border-radius
$am-dialog-border-radius: 2px !default;
// Dialog title padding
$am-dialog-title-padding: am-unit(4) am-unit(3) am-unit(1) !default;

@keyframes am-dialog-fade {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@mixin am-dialog {
  animation: 0.6s am-dialog-fade;
  background: $am-dialog-background;
  border-radius: $am-dialog-border-radius;
  box-shadow: 0 3px 3px rgba(#000, 0.23), 0 3px 3px rgba(#000, 0.16);
  outline: none;
  z-index: $am-elevation-top;
}

@mixin am-dialog-title {
  @include am-type-subheader;
  display: block;
  padding: $am-dialog-title-padding;
}

@mixin am-dialog-footer {
  padding: am-unit(1) am-unit(1) 0;
  text-align: right;
}

@mixin am-dialog-close {
  @include am-btn-icon;
  background: asset_url("active_material/icons/clear.svg") 50% 50% no-repeat;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}
